<!-- 简介页 -->
<template>
	<view class="wrap">
		<!-- 顶部banner -->
		<view class="banner">
			<image src="https://tuanwei.yjha.com.cn/resource/details_banner.jpg" mode="widthFix"></image>
		</view>
		<!-- 基地馆简介 -->
		<view class="introduceBox">
			<text>{{ contTitle }}</text>
			<u-parse class="articeBox" :html="content"></u-parse>
		</view>
		<!-- 基地馆资料 -->
		<view class="jdgBox">
			<u-form-item class="agreeBox">
				<u-checkbox v-model="isAgree" active-color="#ff2424" @change="checkboxChange()">
					确认学习完毕
				</u-checkbox>
			</u-form-item> 
			<button type="default" class="strartAnswer" @click="strartAnswer">开始答题</button>

		</view>
		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxKey: '',
				jdgId: '',
				token:'',
				isAgree: false,
				form: [],
				contTitle: '',
				content: ''
			}
		},
		onLoad(option) {
			// 禁用分享
			wx.hideShareMenu()
			console.log('学习资料')
			console.log(option)
			this.wxKey = option.wxKey;
			this.jdgId = option.jdgId;
			this.token = option.token;
			uni.request({
				url: this.baseUrl+'/api/study/getInfoByRedBaseId',
				method: 'GET',
				data: {
					redBaseId: this.jdgId
				},
				header: {Authorization:uni.getStorageSync('token')},
				success: res => {
					console.log(res)
					this.contTitle = res.data.data.study.blTitle;
					this.content = res.data.data.study.blContent;
				},
				fail: (err) => {
					console.log(err)
				},
			});
		},
		methods: {
			// 开始答题
				strartAnswer(){
					console.log(this.isAgree)
					if(this.isAgree == true){
						uni.redirectTo({
							url: '../answer/answer?jdgId=' +this.jdgId + '&wxKey=' + this.wxKey+ '&token='+this.token
						});
					}else{
						this.showToast('请认真学习资料，确认后进行答题', 'warning')
					}
				},
				// 弹出提示
				showToast(title, type, url) {
					this.$refs.uToast.show({
						title: title,
						type: type,
						url: url
					})
				},
				// 点击确认学习完毕
				checkboxChange(e) {
					this.isAgree = e.value;
				},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: auto;
		overflow: hidden;
		min-height: 100vh;
		background-color: #fef9f5;

		.banner {
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-bottom: 20px;

			image {
				display: block;
				width: 100%;
			}
		}

		.introduceBox {
			width: 92%;
			height: auto;
			overflow: hidden;
			border: 1px #f87070 solid;
			border-radius: 4px;
			margin: 0 auto;
			padding: 15px;
			box-sizing: border-box;
			background-color: #ffeeee;
			text{
				font-size: 16px;
				font-weight: bold;
				display: block;
				text-align: center;
				line-height: 40px;
				margin-bottom: 10px;
			}
		}

		.jdgBox {
			width: 100%;
			height: auto;
			overflow: hidden;
			
			image {
				display: block;
				width: 80%;
				margin: 12px auto 20px auto;
			}

			.jdgCont {
				width: 92%;
				height: auto;
				overflow: hidden;
				border: 1px #f87070 solid;
				border-radius: 4px;
				margin: 0 auto;
				padding: 15px;
				box-sizing: border-box;
				background-color: #ffeeee;
			}
		}

		.confrimBtn {
			font-size: 12px;
			color: #666;
			&::after{
				border: none;
			}
		}

		u-checkbox-group {
			text-align: center;
		}
		.agreeBox{
			text-align: center;
		}
		.strartAnswer {
			width: 80%;
			height: 40px;
			line-height: 40px;
			background-color: #cf1b1b;
			color: #fff;
			font-size: 14px;
			text-align: center;
			margin-bottom: 50px;
			&::after{
				border: none;
			}
		}
		.articeBox{
			font-size: 14px;
			color: #666;
			line-height: 25px;
			image{
				margin: 0 auto;
				display: block;
			}
		}
		
	}
</style>
<style lang="scss">
	.u-border-bottom{
		&::after{
			border: none;
		}
	}
</style>
